<template>
    <div class="info-container">
      <h1>资讯中心</h1>
  
      <el-tabs>
        <el-tab-pane label="通知公告">
          <announcementComponents/>
        </el-tab-pane>
        <el-tab-pane label="区域资质">
          <helpComponents/>
        </el-tab-pane>
  
        <el-tab-pane label="表白墙">
          <el-input v-model="newConfession" placeholder="写下你的表白..."></el-input>
          <el-button type="primary" @click="postConfession">提交</el-button>
          <div class="confessions">
            <el-card v-for="item in confessions" :key="item.id" class="confession-card">
              <p>{{ item.content }}</p>
              <span>{{ item.date }}</span>
            </el-card>
          </div>
        </el-tab-pane>
  

  
        <el-tab-pane label="失物招领">
          <el-input v-model="newLostFound" placeholder="描述你的失物或招领..."></el-input>
          <el-button type="primary" @click="postLostFound">提交</el-button>
          <div class="lost-found">
            <el-card v-for="item in lostFound" :key="item.id" class="lost-found-card">
              <p>{{ item.content }}</p>
              <span>{{ item.date }}</span>
            </el-card>
          </div>
        </el-tab-pane>
  
        <el-tab-pane label="热点咨询">
          <div class="hot-questions">
            <el-card v-for="item in hotQuestions" :key="item.id" class="hot-question-card">
              <h3>{{ item.title }}</h3>
              <p>{{ item.content }}</p>
              <span>{{ item.date }}</span>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import announcementComponents from './components/Announcement.vue'
  import helpComponents from './components/Help.vue'
  
  const announcements = ref([
    { id: 1, title: '欢迎来到资讯中心', content: '这里是最新的通知公告。', date: '2023-01-01' },
    { id: 2, title: '系统维护通知', content: '系统将于1月5日进行维护，届时可能会影响部分功能。', date: '2023-01-02' },
    { id: 3, title: '活动通知', content: '本周末有线下活动，欢迎参加！', date: '2023-01-03' },
    { id: 4, title: '安全提示', content: '请注意个人信息安全，谨防诈骗。', date: '2023-01-04' },
  ]);
  
  const confessions = ref([
    { id: 1, content: '我喜欢你，能不能和我一起去看电影？', date: '2023-01-05' },
    { id: 2, content: '我想对你说，我一直都在等你。', date: '2023-01-06' },
  ]);
  
  const newConfession = ref('');
  
  const helpRequests = ref([
    { id: 1, content: '谁能帮我解决作业问题？', date: '2023-01-07' },
    { id: 2, content: '我的车坏了，有人能帮我吗？', date: '2023-01-08' },
  ]);
  
  const newHelpRequest = ref('');
  
  const lostFound = ref([
    { id: 1, content: '找到了一个钱包，里面有证件，联系我领取。', date: '2023-01-09' },
    { id: 2, content: '丢失了一个黑色手提包，里面有我的重要物品。', date: '2023-01-10' },
  ]);
  
  const newLostFound = ref('');
  
  const hotQuestions = ref([
    { id: 1, title: '如何申请奖学金？', content: '申请奖学金需要准备哪些材料？', date: '2023-01-11' },
    { id: 2, title: '社团活动如何报名？', content: '请问社团活动的报名方式是什么？', date: '2023-01-12' },
    { id: 3, title: '考试复习技巧有哪些？', content: '如何有效复习以提高考试成绩？', date: '2023-01-13' },
  ]);
  
  const postConfession = () => {
    if (newConfession.value) {
      confessions.value.push({ id: confessions.value.length + 1, content: newConfession.value, date: new Date().toLocaleDateString() });
      newConfession.value = '';
    }
  };
  
  const postHelpRequest = () => {
    if (newHelpRequest.value) {
      helpRequests.value.push({ id: helpRequests.value.length + 1, content: newHelpRequest.value, date: new Date().toLocaleDateString() });
      newHelpRequest.value = '';
    }
  };
  
  const postLostFound = () => {
    if (newLostFound.value) {
      lostFound.value.push({ id: lostFound.value.length + 1, content: newLostFound.value, date: new Date().toLocaleDateString() });
      newLostFound.value = '';
    }
  };
  </script>
  
  <style scoped>
  .info-container {
    /* max-width: 800px; */
    width: 95vw;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
  
  .announcement, .confessions, .help-requests, .lost-found, .hot-questions {
    margin-top: 20px;
  }
  
  .announcement-card, .confession-card, .help-request-card, .lost-found-card, .hot-question-card {
    margin-bottom: 10px;
  }
  </style>